<template>
  <!-- 搜索框 -->
    <SearchBox :options="mList" @search="handleSearch"  :clear="clear"></SearchBox>
    <!-- 表格 -->
    <DataTable :tableData="tableData" @deleteD="handleDelete" @searchparent="searchparent" @deleteselected="handleDeleteSelected"></DataTable>
    <!-- 分页 -->
    <pagination :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"> </pagination>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import SearchBox from '../components/SearchBox';
import DataTable from '../components/tablelist';
import pagination  from '../components/pagination';

import router from '@/router';

//搜索框里项目list
let mList = ref([])
let clear= ref(false)
let tableData= ref([])
let total= ref(0)

//分页的变量
let currentPage=ref(1)
let pageSize=ref(5)
import axios from 'axios';

const message = ref('Hello, Vue 3!');
onMounted(() => {
    fetchMn()
    fetchData()
});

//下拉菜单搜索数据
function handleSearch(data){
    console.log(data)
    axios.get('http://localhost:3000/xiangmu/?name=' + data , {
    params: {
      _page: currentPage.value,
      _per_page: pageSize.value
    }
  })
    .then(response => {
            // 请求成功时更新tableData
      tableData.value=response.data.data
      total.value= response.data.items
  
    })
    .catch(error => {
      console.error("Error fetching data:", error); // 请求失败时打印错误信息
    });
}

//获取首页数据
function fetchData(){
  axios.get('http://localhost:8000/test/getinfo/' , {
    params: {
      page: currentPage.value,
      pagesize: pageSize.value
    },
    headers:{
      TOKEN:localStorage.getItem('Token')
    }
  })
  .then(res => {
    if(res.data.code==401){
      alert(res.data.msg)
      router.push('/login')
    }else{
      tableData.value=res.data.data
     total.value= res.data.items
    }
     

  })
  .catch(err => {
    console.error(err); 
  })
}

// 切换每页的条数时
function handleSizeChange(size){
  pageSize.value=size
  clear.value= true
  // axios.get('http://localhost:3000/xiangmu/' , {
  //   params: {
  //     _page: currentPage.value,
  //     _per_page: pageSize.value
  //   }
  // })
  // .then(res => {
  //    tableData.value=res.data.data
  // })
  // .catch(err => {
  //   console.error(err); 
  // })
  fetchData()
}
// 切换页码时
function handleCurrentChange(page){
  clear.value= true
  currentPage.value= page
  // axios.get('http://localhost:3000/xiangmu/' , {
  //   params: {
  //     _page: currentPage.value,
  //     _per_page: pageSize.value
  //   }
  // })
  // .then(res => {
  //    tableData.value=res.data.data
  // })
  // .catch(err => {
  //   console.error(err); 
  // })
  fetchData()
}


// 获取下拉菜单数据
function fetchMn(){
  axios.get("http://localhost:3000/Mn")
  .then(res => {
    mList.value=res.data
  })
  .catch(err => {
    console.error(err); 
  })
}



//删除数据
function handleDelete(data) { 
  var t=confirm('你确定要删除吗?')
      console.log('确认删除提示框返回值',t)
      if(t==true){
  axios.delete('http://localhost:8000/test/deleteitem/' + data,{
    headers:{
      'TOKEN':localStorage.getItem('Token')
    }
  })
    .then(res => {
      if(res.data.code==401){
        alert('无权限，删除失败')
      }else{
        fetchData();
      }
     
    })
    .catch(err => {
      console.error(err);
    })}

 }

 //批量删除数据
 function handleDeleteSelected(data) { 
  console.log("看看拿到的选择的数据：", data)
  var t=confirm("确定要批量删除吗?")
  if(t==true){
  data.forEach(element => {
    console.log("看看id值：", element.id)
    axios.delete('http://localhost:8000/test/deleteitem/' + element.id,{
      headers:{
      'TOKEN': localStorage.getItem('Token')
    }
    })
    .then(res => {
      fetchData();
    })
    .catch(err => {
      console.error(err);
    })
  });
}else{
  
}
    
}
 
 // 搜索
 function searchparent(data){
  axios.get('http://localhost:8000/test/searchinfo/'+data)
  .then(res => {
    console.log(res)
    tableData.value=res.data.data
     total.value= res.data.searchinfo.items
  })
  .catch(err => {
    console.error(err); 
  })

 }

</script>